<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
  </head>
  <body>
    <button id="btn">按钮</button>
    <div id="app"></div>
    <script type="text/babel">
      const oBtn = document.getElementById("btn");
      //创建一个原始虚拟DOM
      const vDOM = (
        <div>
          <div>
            <h1>天气预报</h1>
            <h2>2023年3月23日10:04:00</h2>
          </div>
          <p>今日小雨</p>
        </div>
      );
      //创建一个根容器
      const root = ReactDOM.createRoot(document.getElementById("app"));
      //把原始虚拟DOM渲染在根容器中

      root.render(vDOM);

      //给按钮绑定点击事件 当点击按钮的时候 设置一个新的虚拟DOM 并且重新渲染
      oBtn.onclick = function () {
        /* 
        diff比较策略2(component diff)
        在比较同层级元素的时候 同一类型的组件(元素) 按照原策略(tree diff)深层次比较virtual DOM tree
        在比较同层级元素的时候 不同类型的组件(元素) 那么diff算法会把要改变的组件(元素)判断为dirty component(脏组件) 从而替换整个组件(元素)的所有节点
        */
        const vDOM = (
          <div>
            <header>
              <h1>天气预报</h1>
              <h2>2023年3月23日10:04:00</h2>
            </header>
            <p>今日小雨</p>
          </div>
        );
        root.render(vDOM);
      };
    </script>
  </body>
</html>
